<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IE8支持HTML5+CSS3</title>

    <style type="text/css">
        #cv {
            behavior: url(js/ie-css3.htc);
        }
    </style>

    <!--[if lt IE 9]>
    <script type="text/javascript" src="https://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <script type="text/javascript" src="js/excanvas.js"></script>
    <![endif]-->

</head>
<body>

<div id="coordiv" style="float:left;border:1px solid #c3c3c3"
     onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()">
    <canvas id="cv" width="620" height="444" style="border:1px solid #c3c3c3;">
        Your browser does not support the canvas element.
    </canvas>
</div>
<br/>
<br/>
<br/>
<div id="xycoordinates"></div>

<script type="text/javascript">
    function cnvs_getCoordinates(e) {
        x = e.clientX;
        y = e.clientY;
        document.getElementById("xycoordinates").innerHTML = "Coordinates: (" + x + "," + y + ")";
    }

    function cnvs_clearCoordinates() {
        document.getElementById("xycoordinates").innerHTML = "";
    }

    function test() {
        var ctx = document.getElementById("cv").getContext("2d");
        var img = new Image();
        img.src = "test.jpg";
        ctx.drawImage(img, 0, 0);
    }

    window.onload = test;
</script>
</body>
</html>